{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:grid.html.twig' import gridWidth,gridNav,gridConfig,gridKeyword,reportFormForRole %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@jqgird_css'
    '@jquery_ui_css'
    '@gritter_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

{% block content %}
    {% if roleShow == true %}
        <div class="widget-container-col" style="height: 70px;">
            <div class="widget-box" style="margin: 3px 0px 10px 0" id="tableWidth">
                <div class="widget-body">
                    <div class="widget-main">
                        <form class="form-inline" role="form" action="{{ url(action) }}" method="post" id="reportFormForRole">
                            {% for key,action in options %}
                                <div class="form-group">
                                    <label for="{{ key }}">{{ action.text|trans }}:</label>
                                    <select id="{{ key }}" name="{{ key }}" class="form-control input-sm">
                                        {% for opKey,option in action.options %}
                                            <option value="{{ opKey }}" {% if action.selected is defined and opKey == action.selected %}selected{% endif %}>{{ option }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            {% endfor %}
                            <input type="hidden" name="data" id="report-param" value="{{ originParam }}"/>
                            <button id="loading-btn" type="submit" class="btn btn-sm btn-info" data-loading-text="Loading...">
                                <i class="ace-icon fa fa-search"></i>{{ 'Inquiry'|trans }}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
    <table id="grid-table"></table>
    <div id="grid-pager"></div>
{% endblock %}
{% block footer %}
    {% javascripts
    '@jqgird_js'
    '@gritter_js'
    '@jquery_ui_js'
    '@common_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="text/javascript">
        jQuery(function($) {
            var height = $(document).height() - 270;
            {{ gridWidth() }}
            jQuery(grid_selector).jqGrid({
                caption: "{{ item.caption|trans({'%report_type%': item.report_type, '%start_date%': item.start_date, '%end_date%': item.end_date}) }}"+"只显示前3000条数据",
                url: "{{ path(dataUrl) }}",
                hidegrid:false,
                postData: {param: '{{ param }}'},
                mtype: 'POST',
                datatype: "json",
                colModel:[
                    {% for itemTitle in item.title %}
                    {% if itemTitle.sortable == '1' %}
                    {name: '{{ itemTitle.field }}', index: '{{ itemTitle.field }}', label: '{{ itemTitle.text|trans }}', frozen: true, width: '{{ itemTitle.width }}', align: 'center', sortable: true, fixed:true},
                    {% else %}
                    {name: '{{ itemTitle.field }}', index: '{{ itemTitle.field }}', label: '{{ itemTitle.text|trans }}', frozen: true, width: '{{ itemTitle.width }}', align: 'center', sortable: false, fixed:true},
                    {% endif %}
                    {% endfor %}
                ],
                {{ gridConfig(true) }}
                height: height,
                rownumWidth: 40,
                viewrecords: true, //定义是否要显示总记录数
                rowNum: -1,  //默认每页显示多少条数据
                //rowList: [20,30,50,100],
                sortname:"date",
                sortorder:"desc",
                multiselect: false,
                rownumbers: true,
                footerrow:true,
                userDataOnFooter:true,
                records:true
            });
            {{ gridNav(false,false,false,false,true,false) }}
            jQuery(grid_selector).navButtonAdd(
                    pager_selector,
                    {
                        caption:'{{ 'Export Csv'|trans }}',
                        buttonicon:'ace-icon fa fa-file-excel-o  primary',
                        onClickButton:function() {
                            location.href = "{{ path('icsoc_report_for_role_data', {'export': 'csv','sidx' : 'date', 'param': param})|raw }}";
                        }
                    }
            ).navButtonAdd(
                    pager_selector,
                    {
                        caption:'{{ 'Export Excel'|trans }}',
                        buttonicon:'ace-icon fa fa-file-excel-o  primary',
                        onClickButton:function() {
                            location.href = "{{ path('icsoc_report_for_role_data', {'export': 'excel','sidx' : 'date', 'param': param})|raw }}";
                        }
                    }
            ).navButtonAdd(
                    pager_selector,
                    {
                        caption:'{{ 'Go Back'|trans }}',
                        buttonicon:'ace-icon fa fa-reply  primary',
                        onClickButton:function() {
                            location.href = "{{ backUrl }}";
                        }
                    }
            );
        });
    </script>
{% endblock %}